<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>dependencyBrowseTree</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script src="tree.data.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css"/>

    <style>
        #input-field {
            display: inline;
        }
        #tree_div {
            font-family: monospace
        }
    </style>
</head>
<body>
<h1>Dependencies</h1>
Search: <input type="search" id="input-field" value="">
<div id="tree_div" class="jstree-no-icons"></div>

<script>
$(function() {
    $('#tree_div').jstree({
        "plugins": ["search", "sort"],
        "core": {
            "data": tree_data
        }
    });
    var to = false;
    $('#input-field').keyup(function() {
        if (to) {
            clearTimeout(to);
        }
        to = setTimeout(function() {
            var v = $('#input-field').val();
            $('#tree_div').jstree(true).search(v);
        }, 250);
    });
});
</script>
</body>
</html>